<template>
  <!-- 修改分类 -->
  <el-dialog :visible.sync="showdialog" :close-on-click-modal="false" width="20%" :show-close="false" :before-close="handleClose" append-to-body>
    <div class="dialogContainer">
      <div class="head">
        <span>修改图片分类</span>
      </div>
      <!-- 主体部分 -->
      <div class="content">
        <div class="left">
          <p>分类归属</p>
          <el-cascader v-model="myValue" @change="selectQuery" ref="cascaderQuery" :options="options" :props="optionProps" clearable></el-cascader>
        </div>
      </div>
      <div class="btn">
        <button @click="cancel">取消</button>
        <button @click="comfirm">确定</button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'editSort',
  data() {
    return {
      myValue: [],
      showdialog: false, // 显示状态
      options: [], // 筛选数据
      // el-cascader显示字段修改
      optionProps: {
        value: 'id',
        label: 'name',
        children: 'children',
        disabled: 'disabled'
      },
      // 选择的新的图片分类类型
      newTypeId: null,
      id: null
    }
  },
  methods: {
    // 打开组件
    openCom(val) {
      this.showdialog = true
      this.myValue = []
      this.newTypeId = null

      // this.$refs.cascaderQuery.clearCheckedNodes()
      this.getList()
      console.log('组件', val)
      this.id = val.id
    },
    // 关闭组件
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },
    cancel() {
      this.showdialog = false
      this.clear()
    },
    // 清空筛选
    clear() {
      this.$refs.cascaderQuery.checkedValue = ''
      this.$refs.cascaderQuery.$refs.panel.activePath = []
      this.newTypeId = null
    },
    // 获取分类列表
    async getList() {
      const res = await this.$http.get('/image/type/list')
      console.log('分类列表', res)
      // this.data = res.data.data
      // 空数组去掉
      this.options = res.data.data || []

      for (const item of this.options || []) {
        if (!item.children || item.children.length === 0) {
          delete item.children
        } else {
          this.deepArr(item.children)
        }
      }
    },

    deepArr(data) {
      for (const item of data || []) {
        if (!item.children || item.children.length === 0) {
          delete item.children
        } else {
          this.deepArr(item.children)
        }
      }
    },
    // 确认提交
    async comfirm() {
      const changeRes = {
        id: this.id,
        imageTypeId: this.newTypeId
      }
      const res = await this.$http.post('/image/update', changeRes)
      console.log(res)
      if (res.data.code === 200) {
        this.$message({
          showClose: true,
          type: 'success',
          message: '修改成功'
        })
        this.showdialog = false
        this.clear()
        this.$emit('update')
      } else {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '修改失败'
        })
      }
    },
    // 图片类型分类
    selectQuery() {
      // console.log('筛选节点信息', this.$refs.cascaderQuery.getCheckedNodes()[0].data)
      console.log('筛选长度', this.$refs.cascaderQuery.checkedValue.length)
      // if (this.$refs.cascaderQuery.checkedValue.length === 0) {
      //   this.page.type = null
      // } else {
      //   const id = this.$refs.cascaderQuery.getCheckedNodes()[0].data.id
      //   this.page.type = id
      // }
      // 判断分类级别是否有第三级
      if (this.$refs.cascaderQuery.checkedValue.length === 2 || this.$refs.cascaderQuery.checkedValue.length === 1) {
        this.$message({
          type: 'warning',
          message: '请先完善该分类至三级',
          showClose: true
        })
        this.newTypeId = null
        return
      }
      if (this.$refs.cascaderQuery.getCheckedNodes()[0]) {
        const id = this.$refs.cascaderQuery.getCheckedNodes()[0].data.id
        this.newTypeId = id
      } else {
        this.$message({
          type: 'warning',
          message: '请选择分类类型',
          showClose: true
        })
      }
      console.log(this.newTypeId)
    }
  }

}
</script>
<style>
body,
html,
#app {
  min-width: 1100px !important;
}
</style>
<style lang='less' scope>
.dialogContainer {
  button {
    cursor: pointer;
  }
  .head {
    width: 100%;
    height: 40px;
    background: #eeeeee;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content {
    padding: 20px 30px;
    height: 275px;
    .left {
      width: 100%;
      height: 100%;
    }
  }
  .btn {
    // padding: 0px 260px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    &:before,
    &:after {
      content: '';
      display: block;
    }
    button {
      width: 99px;
      height: 35px;
      background: #ffffff;
      border-radius: 20px;
      border: 1px solid #333333;
      &:nth-child(2) {
        background: #333333;
        color: #ffffff;
      }
    }
  }
}
.el-dialog__header {
  padding: 0;
}
.el-dialog__body {
  padding: 0;
}
</style>
